<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑图书信息</title>
    <script type="application/javascript" src="js/vue.min.js"></script>
    <!-- 基于promise 技术的专门用于ajax调用的js-->
    <script type="application/javascript" src="js/axios.min.js"></script>
    <script type="application/javascript" src="js/qs.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
<div id="app">
    <label>编号</label><input v-model="book.id"><br>
    <label>书名</label><input v-model="book.bookname"><br>
    <label>出版社</label><input v-model="book.bookpress"><br>
    <label>出版日期</label><input v-model="book.pressdate"><br>
    <label>作者</label><input v-model="book.bookauthor"><br>
    <label>库存</label><input v-model="book.bookcount"><br>
    <label></label><button @click="save">保存</button>

</div>
<script type="application/javascript">
    var vue = new Vue({
        el : "#app",
        data : {
            book : {},
        },
        // 但 vue 对象创建好之后，立即执行的代码
        created : function (){
            // JS BOM 地址对象 #？？
            var that = this;
            var id = location.hash.substring(1);
            axios({
                url : "GetBookServlet.do/GetBook",
                params : {
                    id : id
                }
            }).then( res =>{
                //axios 方法会自动转 json 对象 JSON.parse()
                that.book = res.data.data;
                console.log(that.book);
            })
        },
        methods : {
            save(){
                console.log(this.book);
                axios({
                    method: 'post',
                    url: "SaveBookServlet.do/SaveBook",
                    params: this.book,
                }).then(res =>{
                    alert(res.data);
                })
            }
        }
    })
    // axios.post("SaveBookServlet.do/SaveBook",qs.stringify(this.book))
</script>
</body>
</html>